<template>
  <div class="app-container">
    <div class="flex-box">
      <div class="item">
        <el-button @click="addShow">添加公告</el-button>
      </div>

      <div class="item">
        <el-date-picker
          v-model="searchdate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          @change="getList"
        />
      </div>

      <div class="item">
        <el-input v-model="searchcontent" placeholder="请输入消息标题">
          <el-button slot="append" icon="el-icon-search" @click="getList">搜索</el-button>
        </el-input>
      </div>
    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%" class="no-r-b"
      :header-cell-style="{background:'#FAFAFA',color:'#666666'}">
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公告标题">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公告内容">
        <template slot-scope="scope">
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="公告状态">
        <template slot-scope="scope">
          <span>{{ scope.row.status == '1' ? '显示' : '不显示' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建日期">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后更新日期">
        <template slot-scope="scope">
          <span>{{ scope.row.updated_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit" @click="editShow(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <!--列表数据添加/编辑开始  -->
    <el-dialog v-if="dialogFormVisible" :title="dialogTitle" :visible.sync="dialogFormVisible" center width="95%">
      <el-form ref="ruleForm" :model="formRow" label-width="70px">
        <el-form-item label="公告标题">
          <el-input v-model="formRow.title" placeholder="请输入公告标题" auto-complete="off" />
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input type="textarea" :rows="5" v-model="formRow.content" placeholder="请输入公告内容" auto-complete="off" />
        </el-form-item>
        <el-form-item label="公告状态">
          <el-radio v-model="formRow.status" :label="1">显示</el-radio>
            <el-radio v-model="formRow.status" :label="2">不显示</el-radio>
        </el-form-item>
        <!-- <el-form-item> -->
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
        <!-- </el-form-item> -->
      </el-form>
    </el-dialog>
    <!--列表数据添加/编辑结束  -->
  </div>
</template>

<script>
import { getNotyList, addNoty, editNoty } from '@/api/msg'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
export default {
  name: 'NotyList',
  components: { Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      searchcontent: '', // 搜索内容
      searchdate: '', // 搜索日期
      // 日期插件参数
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 弹窗标题
      dialogTitle: '',
      dialogFormVisible: false,
      // 表单数据
      formRow: {
        title: '',
        content: '',
        status: 2,
      }
    }
  },
  created() {
    this.getList()
  },
  methods:{
    getList() {
      this.listLoading = true
      const search = { searchcontent: this.searchcontent }
      if (this.searchdate) {
        const startDate = this.searchdate[0]
        const endDate = this.searchdate[1]
        search.startDate = startDate
        search.endDate = endDate
      }
      const postdata = { ...this.listQuery, ...search }
      getNotyList(postdata).then((response) => {
        const { data } = response
        console.log(response, 'getNotyList')
        this.list = data.list
        this.total = data.total
        this.listLoading = false
      })
    },
    // 添加
    addShow() {
      this.formRow = {
        title: '',
        content: '',
        status: 2,
      }
      this.dialogTitle = '添加公告'
      this.dialogFormVisible = true
    },
    // 编辑
    editShow(row) {
      this.formRow = row
      this.dialogTitle = '编辑公告'
      this.dialogFormVisible = true
    },
    // 表单提交方法
    submitForm(formName) {
      console.log(this.formRow, 'submitForm')
      if (!this.formRow.id) { // 新增数据
        addNoty(this.formRow).then(res => {
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.dialogFormVisible = false
          this.getList()
        })
      } else { // 编辑数据
        editNoty(this.formRow).then(res => {
          Message({
            message: '保存成功',
            type: 'success',
            duration: 2 * 1000
          })
          this.dialogFormVisible = false
          this.getList()
        })
      }
    },
  }
}
</script>

<style>
</style>
